<template>
  <div class="wrapper">
    <el-row>
      <div v-for="item in this.listprop">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{item.supplierName}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="openDesc(item)">查看详情
                </el-button>
              </div>
              <div class="textLi item">
                原煤单价(元/吨)：{{item.unitPrice}}
              </div>
              <div class="textLi item">
                投标数量(万吨)：{{item.supplyQuantity}}
              </div>
              <div class="textLi item">
                发货地：{{item.port}}
              </div>
            </el-card>
          </div>
        </el-col>
      </div>


    </el-row>
    <!--对话框开始-->
    <el-dialog title="煤炭信息" :visible.sync="dialogFormVisible">
      <el-descriptions title="">
        <el-descriptions-item label="供应数量(万吨)">{{propItem.supplyQuantity}}</el-descriptions-item>
        <el-descriptions-item label="热值(KCal/kg)≥">{{propItem.calorificValue}}</el-descriptions-item>
        <el-descriptions-item label="原煤单价(元/吨)">{{propItem.unitPrice}}</el-descriptions-item>
        <el-descriptions-item label="全硫(%)≤">{{propItem.sulfur}}</el-descriptions-item>
        <el-descriptions-item label="全水分(%)≤">{{propItem.waterContent}}</el-descriptions-item>
        <el-descriptions-item label="运费单价(元/吨)">{{propItem.freightUnitPrice}}</el-descriptions-item>
        <el-descriptions-item label="挥发分最低(%)">{{propItem.volatitleMatterDown}}</el-descriptions-item>
        <el-descriptions-item label="挥发分最高(%)">{{propItem.volatitleMatterUp}}</el-descriptions-item>
        <el-descriptions-item label="空干基灰分(%)≤">{{propItem.ashContent}}</el-descriptions-item>
        <el-descriptions-item label="发货港口">{{propItem.port}}</el-descriptions-item>
        <el-descriptions-item label="产地">{{propItem.placeOrigin}}</el-descriptions-item>
        <el-descriptions-item label="报价保证金(元/吨)">{{propItem.bondNumber}}</el-descriptions-item>
        <el-descriptions-item label="牌子状态">
          <p v-if="propItem.propstatus=='0'">
            <el-tag size="small">
              在挂
            </el-tag>
          </p>
          <p v-else>
            <el-tag size="small">
              被摘
            </el-tag>
          </p>
        </el-descriptions-item>
        <el-descriptions-item label="所属企业">{{propItem.supplierName}}</el-descriptions-item>
      </el-descriptions>

      <div slot="footer" class="dialog-footer">

        <p v-if="propItem.propstatus=='0'">

          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" v-if="userInfo.status==0" @click="zhaipai">摘 牌</el-button>

        </p>
        <p v-else>

          <el-button @click="dialogFormVisible = false">取 消</el-button>

        </p>

      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Common from '@/components/common/Common'

  export default {
    name: "TradingCenter",
    data() {
      return {
        userInfo: Common.userInfo,
        listprop: [],
        propItem: {},
        dialogFormVisible: false,
      };
    },

    mounted: function () {

      this.loadAllPropByStatus();//需要触发的函数
    },
    methods: {
      openDesc(item) {
        // console.log("$$", item)
        this.dialogFormVisible = true;
        this.propItem = item;
      },
      loadAllPropByStatus() {
        this.axios.get(Common.API+'prop/loadPropByStatus')
          .then(response => {
            console.log("查询成功"+Common.API);
            this.listprop = response.data.data;

            // (this.info = response)
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      },
      zhaipai() {//买方摘牌
        var data = {
          propId: this.propItem.id,
          enterpriseIdBuy: Common.enterpriseInfoBuy.enterpriseId,
          enterpriseIdSale: this.propItem.enterpriseId
        }
        var jsonData = JSON.stringify(data);
        console.log("jsondata:", jsonData);


        this.axios.post(Common.API+'prop/updateProp', jsonData,
          {headers: {'Content-Type': 'application/json;charset=UTF-8'}})
          .then(response => {
            console.log("#", response.data);
            if (response.data.code == 200) {
              this.$message(response.data.msg);
              this.dialogFormVisible = false;

              this.loadAllPropByStatus();//需要触发的函数
            }
          })
          .catch(function (error) { // 请求失败处理
            this.$message('请求失败！');
            console.log(error);
          });
      }
    }
  }
</script>

<style scoped>
  .wrapper {

  }

  .meg {
    width: 400px;
    height: 670px;
    background-color: aqua;
  }

  /*!*布局*!*/
  /*.el-row {*/
    /*margin-bottom: 20px;*/

  /*&*/
  /*:last-child {*/
    /*margin-bottom: 0;*/
  /*}*/

  /*}*/
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /*卡片*/
  .textLi {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 90%;
  }
</style>
